<template>
	<view class="bigbox">
		<!-- 头部轮播图 -->
		<view class="ubox">
			<u-swiper :list="listbanner" height="475" mode="none" @click="swiperbtn"></u-swiper>
			<view class="aa">
				<view class="picture" v-for="(item,index) in arr1" :key="index" @click="picture(index,item.text)" :class="currentindex===index?'specil':''">
					{{item.text}}
				</view>
			</view>
		</view>


		<!-- 标签 -->
		<view class='padding-xs'>
			<ColorfulLabel :labelArr="obj.label"></ColorfulLabel>
		</view>

		<!-- 房源名称 -->
		<view class="resourcename">
			{{obj.name || ''}}
		</view>


		<!-- 面积价格 -->
		<view class="area">
			<view class="top">
				<view class="base">
					<view class="num" v-if="type==1">
						{{obj.price || ''}}<text class="unit">万</text>
					</view>
					<view class="num" v-if="type==2">
						{{obj.price || ''}}<text class="unit">元/月</text>
					</view>
					<view class="price">
						售价
					</view>
				</view>
				<view class="base">
					<view class="num">
						{{obj.room || '' }}<text class="unit">室</text>{{obj.hall || ''}}<text class="unit">厅</text>
					</view>
					<view class="price">
						房型
					</view>
				</view>
				<view class="base">
					<view class="num">
						{{obj.building_area || ''}}<text class="unit">㎡</text>
					</view>
					<view class="price">
						建筑面积
					</view>
				</view>
			</view>

			<!-- 单价部分 -->
			<view class="briefsmallbox" v-if="type==1">
				<view class="cont">
					<text class="tops">单价</text>
					<text class="down">{{obj.unit_price||"暂无"}}元/㎡</text>
				</view>
				<view class="cont">
					<text class="tops">建筑年份:</text>
					<text class="down">{{obj.build_date||"暂无"}}</text>
				</view>
				<view class="cont">
					<text class="tops">梯户比:</text>
					<text class="down">{{obj.ladder_house_scale||"暂无"}}</text>
				</view>
				<view class="cont">
					<text class="tops">楼型:</text>
					<text class="down">{{obj.the_floor||"暂无"}}</text>
				</view>
				<view class="cont">
					<text class="tops">用途:</text>
					<text class="down">{{obj.purpose||"暂无"}}</text>
				</view>
				<view class="cont">
					<text class="tops">朝向:</text>
					<text class="down">{{obj.orientation||"暂无"}}</text>
				</view>
				<!-- <view class="cont">
					<text class="tops">装修:</text>
					<text class="down">{{obj.decorate||"暂无"}}</text>
				</view> -->
				<view class="cont">
					<text class="tops">权属:</text>
					<text class="down">{{obj.ownerships||"暂无"}}</text>
				</view>
				<view class="cont">
					<text class="tops">建筑类型:</text>
					<text class="down">{{obj.build_type||"暂无"}}</text>
				</view>
				<view class="cont">
					<text class="tops">电梯:</text>
					<text class="down">{{obj.elevator||"暂无"}}</text>
				</view>
			</view>
			
			<view class="briefsmallbox" v-if="type==2">
				<view class="cont">
					<text class="tops">供水</text>
					<text class="down">{{obj.water_supply||"暂无"}}</text>
				</view>
				<view class="cont">
					<text class="tops">供暖</text>
					<text class="down">{{obj.heating_supply||"暂无"}}</text>
				</view>
				<view class="cont">
					<text class="tops">供电</text>
					<text class="down">{{obj.power_supply||"暂无"}}</text>
				</view>
				<view class="cont">
					<text class="tops">是否有燃气</text>
					<text class="down">{{obj.have_gas==1?"有燃气":"没有燃气"}}</text>
				</view>
				<view class="cont">
					<text class="tops">是否有车位</text>
					<text class="down">{{obj.have_parking==1?"无车位":"有车位"}}</text>
				</view>
				<view class="cont">
					<text class="tops">朝向:</text>
					<text class="down">{{obj.orientation||"暂无"}}</text>
				</view>
				<view class="cont">
					<text class="tops">出租方式:</text>
					<text class="down">{{obj.rent_type||"暂无"}}</text>
				</view>
				<!-- <view class="cont">
					<text class="tops">权属:</text>
					<text class="down">{{obj.ownerships||"暂无"}}</text>
				</view> -->
				<view class="cont">
					<text class="tops">装修:</text>
					<text class="down">{{obj.decorate||"暂无"}}</text>
				</view>
				<view class="cont">
					<text class="tops">电梯:</text>
					<text class="down">{{obj.elevator||"暂无"}}</text>
				</view>
			</view>

			<!--小区-->
			<view class="namesbox">
				<text class="names">小区</text>
				<text class="down">{{obj.community_name}}</text>
				<text class="blue">小区详情</text>
			</view>
			<view class="namesbox">
				<text class="names">其他</text>
				<text class="down">产权年限梯户比</text>
				<text class="blue">+了解更多</text>
			</view>
		</view>

		<!-- 投资潜力 -->
		<view class="investment" v-if="type==1">
			<text class="left">投资潜力</text>
			<text class="right">查看详情</text>
		</view>

		<view class="investmentbox" v-if="type==1">
			<view class="left">
				<view class="grade">
					{{obj.potential_info.score || 0}}
				</view>
				<StarTitle :num="'4'"></StarTitle>
				<view class="evaluatebox">
					<text>房源评价</text>
					<text class="evaluate">{{obj.potential_info.potential_info || 0}}</text>
				</view>
			</view>
			<view class="right">
				<view class="rightsamllbox">
					<view class="grade">
						{{obj.potential_info.trade_score || 0}}
					</view>
					<view class="evaluatebox">
						交易价值
					</view>
				</view>
				<view class="rightsamllbox">
					<view class="grade">
						{{obj.potential_info.live_score || 0}}
					</view>
					<view class="evaluatebox">
						居住品质
					</view>
				</view>
				<view class="rightsamllbox">
					<view class="grade">
						{{obj.potential_info.convenience_score || 0}}
					</view>
					<view class="evaluatebox">
						便利指数
					</view>
				</view>
				<view class="rightsamllbox">
					<view class="grade">
						{{obj.potential_info.property_score || 0}}
					</view>
					<view class="evaluatebox">
						物业服务
					</view>
				</view>

			</view>
		</view>


		<!-- 推荐保安 -->
		<!-- <view class="recommendbox">
			<view class="recommend">
				推荐保安
			</view>
			<view class="bigcontbox">
				<view class="contbox" v-for="(item,index) in obj.guard" :key="index">
					<image :src="item.header_img" mode=""></image>
					<text class="villagename">{{item.phone}}</text>
					<text class="villagename">{{item.name || item.nickname}}</text>
				</view>
			</view>
		</view> -->

		<!-- 位置周边 -->
		<view class="investment">
			<text class="left">位置周边</text>
		</view>
		<map :latitude="lat" :longitude="lng" :markers="covers" @click="mapnavigation"></map>
		<BaseMap :lat="lat" :lng="lng" :tabItem="itemarr"></BaseMap>

		<!-- 房源介绍 -->
		<view class="investment">
			<text class="left">房源介绍</text>
		</view>
		<view class="introduce">
			{{obj.description}}
		</view>
	</view>
</template>
<script>
	import BaseMap from "../../components/BaseMap/index.vue"
	import BaseTitle from "../../components/BaseTitle/index.vue"
	import StarTitle from "../../components/StarTitle/index.vue"
	import {
		gethouseparticulars
	} from "../../api/api/index.js"
	import ColorfulLabel from "../../components/ColorfulLabel/index.vue"
	export default {
		data() {
			return {
				lat: 0,
				lng: 0,
				// labelArr:[],
				arr1: [{
					text: "图片"
				}, {
					text: "户型"
				}],
				itemarr: [{
						title: "公交"
					},
					{
						title: "地铁"
					},
					{
						title: "医院"
					},
					{
						title: "银行"
					},
					{
						title: "休闲娱乐"
					},
					{
						title: "餐饮"
					},
				],
				// 地图
				covers: [{
					id: 0,
					latitude: 0, //纬度
					longitude: 0, //经度
					iconPath: '', //显示的图标        
					rotate: 0, // 旋转度数
					width: 0, //宽
					height: 0, //高
					title: '你在哪了', //标注点名
					alpha: 0.5, //透明度
					callout: { //自定义标记点上方的气泡窗口 点击有效  
						content: '幸福花园店A组\n唐山迁安', //文本
						color: '#767676', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 2, //边框圆角
						bgColor: '#FFFFFF', //背景颜色
						display: 'ALWAYS', //常显
						padding: 20,
						borderRadius: 10
					},

				}],
				currentindex: 0,
				// 判断是图片还是户型
				topbool: true,
				id: 0,
				type: 0,
				obj: {},
				listbanner: []
			}
		},
		components: {
			BaseTitle,
			StarTitle,
			ColorfulLabel,
			BaseMap
		},
		methods: {
			swiperbtn(e){
				let imgs = this.listbanner.map(v=>{
					return v.image
				})
				console.log(imgs)
				uni.previewImage({
					urls: imgs,
					current: e
				})
			},
			picture: function(index, item) {
				this.currentindex = index
				if (item == "图片") {
					this.topbool = true
				} else {
					this.topbool = false
				}
			},
			mapnavigation: function() {
				let that=this
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.openLocation({
							latitude: that.lat,
							longitude: that.lng,
							name: "",
							success: function() {
								console.log('success');
							}
						});
					}
				});
			},
			publikapi() {
				let data = {
					id: this.id,
					type: this.type
				}
				gethouseparticulars(data).then(res => {
					this.obj = res.data
					this.lat = parseFloat(res.data.lat)
					this.lng = parseFloat(res.data.lng)
					this.listbanner = res.data.banner.map(v => {
						return {
							image: v
						}
					})
				})
			}
		},
		onLoad(e) {
			this.id = e.id
			this.type = e.type
		},
		onShow() {
			this.publikapi()
		}
	}
</script>

<style scoped lang="less">
	.investment {
		display: flex;
		justify-content: space-between;
		padding: 0 23rpx;
		box-sizing: border-box;

		.left {
			font-family: MicrosoftYaHei-Bold;
			font-size: 36rpx;
			color: #000000;
			font-weight: 700;
		}

		.right {
			font-family: MicrosoftYaHei;
			font-size: 24rpx;
			color: #474747;
			margin-top: 5rpx;
		}
	}

	.bigbox {
		background-color: #FFFFFF;
		padding-bottom: 30rpx;
		box-sizing: border-box;
	}

	.padding-xs {
		margin-top: 28rpx;
		margin-bottom: 20rpx;
	}

	/* 轮播图 */
	.ubox {
		position: relative;

		.swiperbox {
			width: 100%;
			height: 475rpx;
		}

		.aa {
			position: absolute;
			width: 100%;
			bottom: 37rpx;
			width: 245rpx;
			height: 52rpx;
			background-color: #ffffff;
			border-radius: 26rpx;
			left: 236rpx;
			display: flex;
			justify-content: space-between;

			.picture {
				width: 122rpx;
				height: 52rpx;
				text-align: center;
				line-height: 52rpx;
				font-size: 20rpx;
				font-family: MicrosoftYaHei;
			}

			.specil {
				background-color: #D03B35;
				width: 122rpx;
				height: 52rpx;
				border-radius: 26rpx;
				color: #FFFFFF;
			}
		}
	}

	.resourcename {
		font-size: 36rpx;
		font-family: MicrosoftYaHei-Bold;
		color: #000000;
		font-weight: 700;
		margin-left: 20rpx;
	}

	.area {
		margin-bottom: 80rpx;

		.top {
			display: flex;
			justify-content: space-around;
			margin-top: 66rpx;

			.base {
				.num {
					font-size: 54rpx;
					font-family: PingFang-SC-Heavy;
					color: #d03b35;
					font-weight: 700;

					.unit {
						font-size: 20rpx;
					}
				}

				.price {
					font-size: 22rpx;
					color: #999999;
					font-family: MicrosoftYaHei;
					text-align: center;
					margin-top: 20rpx;
				}
			}
		}

		.briefsmallbox {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			flex-wrap: wrap;
			margin-top: 33rpx;

			.cont {
				width: 50%;
				margin-bottom: 20rpx;

				.tops {
					font-family: MicrosoftYaHei;
					font-size: 24rpx;
					color: #999999;
				}

				.down {
					font-family: MicrosoftYaHei;
					font-size: 24rpx;
					color: #333333;
					margin-left: 23rpx;
				}
			}
		}

		.namesbox {
			margin-left: 30rpx;
			margin-bottom: 20rpx;

			.names {
				font-size: 24rpx;
				color: #999999;
				font-family: MicrosoftYaHei;
			}

			.down {
				margin-left: 23rpx;
				font-size: 24rpx;
				color: #333333;
				font-family: MicrosoftYaHei;
			}

			.blue {
				margin-left: 50rpx;
				font-size: 24rpx;
				color: #408cff;
				font-family: MicrosoftYaHei;
			}
		}
	}

	// 投资潜力
	.investmentbox {
		display: flex;
		// margin-left: 20rpx;
		margin-right: 20rpx;
		width: 100%;
		margin-top: 32rpx;
		padding: 21rpx;
		box-sizing: border-box;
		margin-bottom: 64rpx;

		.left {
			width: 304rpx;
			height: 215rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.35);
			border-radius: 10rpx;
			border: solid 1rpx #f3f3f3;
			margin: 0 auto;

			.grade {
				font-size: 48rpx;
				color: #d03b35;
				font-family: PingFang-SC-Heavy;
				text-align: center;
				font-weight: 700;
			}

			.star {
				text-align: center;
				margin-top: 24rpx;
			}

			.evaluatebox {
				font-size: 18rpx;
				color: #515050;
				font-family: MicrosoftYaHei;
				text-align: center;
				margin-top: 24rpx;

				.evaluate {
					color: #aaaaaa;
				}
			}
		}

		.right {
			width: 50%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.rightsamllbox {
				width: 45%;
				height: 100rpx;
				background-color: #ffffff;
				box-shadow: 0rpx 1rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 10rpx;
				padding: 20rpx 0;
				box-sizing: border-box;

				.grade {
					font-size: 30rpx;
					color: #d03b35;
					font-weight: 700;
					text-align: center;
				}

				.evaluatebox {
					font-size: 18rpx;
					color: #515050;
					font-family: MicrosoftYaHei;
					text-align: center;
					margin-top: 9rpx;
				}
			}
		}
	}

	.recommendbox {
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding: 32rpx 27rpx;
		box-sizing: border-box;

		.recommend {
			font-family: MicrosoftYaHei-Bold;
			font-size: 30rpx;
			font-weight: 700;
			color: #000000;
		}

		.bigcontbox {
			width: 689rpx;
			background-color: #f4f4f4;
			border-radius: 5rpx;

			.contbox {
				display: flex;
				align-items: center;
				margin-top: 37rpx;

				image {
					width: 79rpx;
					height: 79rpx;
					border-radius: 79rpx;
				}

				.villagename {
					font-size: 26rpx;
					color: #333333;
					font-family: MicrosoftYaHei;
					margin-left: 24rpx;
				}
			}
		}


	}

	// 介绍
	.introduce {
		font-family: MicrosoftYaHei;
		font-size: 24rpx;
		color: #333333;
		margin-top: 46rpx;
		margin-left: 21rpx;
		margin-right: 21rpx;
	}

	// 按钮
	.btnbox {
		display: flex;
		justify-content: space-between;
		margin: 62rpx 27rpx 0rpx 27rpx;

		.left {
			width: 330rpx;
			height: 80rpx;
			background-color: #ffc600;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: MicrosoftYaHei;
			color: #000000;
			text-align: center;
			line-height: 80rpx;
		}

		.right {
			width: 330rpx;
			height: 80rpx;
			background-color: #d03b35;
			border-radius: 20rpx;
			color: #ffffff;
			font-family: MicrosoftYaHei;
			font-size: 28rpx;
			text-align: center;
			line-height: 80rpx;
		}
	}

	map {
		width: 100%;
		height: 425rpx;
		margin-top: 38rpx;
	}
</style>
